import React, {memo, useEffect, useRef, useState} from "react";
import {Carousel} from "antd";
import MusicCoverItem from "../../../../components/part/musicCoverItem/MusicCoverItem";
import SongSheetItem from "../../../../components/part/songSheetItem/SongSheetItem";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import HomeStyle from "./HomtStyle";
import RankingList from "../../../../components/part/rankingList/RankingList";
import {getSysDictById, getSysDictData} from "../../../../services/sysDictData";
import {getMusicByPageAPI} from "../../../../services/music";
import {MusicInsertDTO} from "../../../../interface/MusicInterface";
import {getMusicCollectPageApi} from "../../../../services/musicCollect";
import {MusicCollect, MusicCollectPageDTO} from "../../../../interface/MusicCollectInterface";
import {DictData} from "../../../../interface/SysDictDataInterface";

type propsType = {}
const lunboList = [
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/eNKM6orq0NGkEVkZJtboCKuB8ibLCHBvdCnyvKUy9VMXmzhetqfcySsPibwj0E79UE/300?n=1",
    "musicName": "徐良+女声=90后青春回忆杀",
    "playedNumber": 1000000,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/r9ZyNKibEJFHSPoVPMRgbXsWZbvIlw1Vdfxr9gOGRF1ENt2aEV4RibQvWicK747NLSb/300?n=1",
    "musicName": "节奏卡点｜超燃来袭开启休闲模式",
    "playedNumber": 10000233,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/R5pDtwIavdcmyTiaO14GIthG33obT9tibFhUC4vicsgHwXBFNHicb56J4aljGKFHj7aI/300?n=1",
    "musicName": "/韩系治愈/你的眼里藏满了温柔～",
    "playedNumber": 10020233,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/QT50Uiaax58BxsTGcneLKouQTayRoPpQHAnEwn7SJSBlxuLbjzqbt4w/300?n=1",
    "musicName": "PDD歌友会第一季歌曲全收录",
    "playedNumber": 20000233,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/Kfat8dubG9jd2J815HySpqoRYCC5NmhOhAnNcKUtyQCVyT63GEAaibA/300?n=1",
    "musicName": "流媒女王邓紫棋：走心优作分享站",
    "playedNumber": 10200233,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/SXTicaprnQbfAyiaibTsguPlIBcIviasrcQ2rUgIfVbfVcrvvQINiaIQ98A/300?n=1",
    "musicName": "《动画城》致90后的我们终将逝去的青春",
    "playedNumber": 1320023,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/QT50Uiaax58BxsTGcneLKouQTayRoPpQHAnEwn7SJSBlxuLbjzqbt4w/300?n=1",
    "musicName": "PDD歌友会第一季歌曲全收录",
    "playedNumber": 10000233,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/SXTicaprnQbfAyiaibTsguPlIBcIviasrcQ2rUgIfVbfVcrvvQINiaIQ98A/300?n=1",
    "musicName": "《动画城》致90后的我们终将逝去的青春",
    "playedNumber": 1320023,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/r9ZyNKibEJFHSPoVPMRgbXsWZbvIlw1Vdfxr9gOGRF1ENt2aEV4RibQvWicK747NLSb/300?n=1",
    "musicName": "节奏卡点｜超燃来袭开启休闲模式",
    "playedNumber": 30000233,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/QT50Uiaax58BxsTGcneLKouQTayRoPpQHAnEwn7SJSBlxuLbjzqbt4w/300?n=1",
    "musicName": "PDD歌友会第一季歌曲全收录",
    "playedNumber": 10000233,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/eNKM6orq0NGkEVkZJtboCKuB8ibLCHBvdCnyvKUy9VMXmzhetqfcySsPibwj0E79UE/300?n=1",
    "musicName": "徐良+女声=90后青春回忆杀",
    "playedNumber": 1000000,
  },
  {
    "imgUrl": "https://qpic.y.qq.com/music_cover/SXTicaprnQbfAyiaibTsguPlIBcIviasrcQ2rUgIfVbfVcrvvQINiaIQ98A/300?n=1",
    "musicName": "《动画城》致90后的我们终将逝去的青春",
    "playedNumber": 1320023,
  },
];

export default memo(function Home(props: propsType) {
  // let [lunboNumber,setLunboNumber]=useState(0);
  //由于我们有三个轮播图
  const gxhtjRef: React.MutableRefObject<any> = useRef(null);
  const xgsfRef: React.MutableRefObject<any> = useRef(null);
  const gdtjRef: React.MutableRefObject<any> = useRef(null);
  //歌曲风格字典列表
  const [musicStyle, setMusicStyle] = useState<DictData[]>([]);
  //歌单风格字典列表
  const [songSheetStyle, setSongSheetStyle] = useState<DictData[]>([]);
  //新歌首发列表
  const [musicList, setMusicList] = useState<MusicInsertDTO[]>([]);
  //个性化推荐列表
  const [songSheet, setSongSheet] = useState<Array<MusicCollect>>([]);
  //歌曲风格当前字典索引
  const [musicStyleIndex, setMusicStyleIndex] = useState(0);
  //歌单风格当前字典索引
  const [songSheetStyleIndex, setSongSheetStyleIndex] = useState(0);

  // 接口请求函数
  useEffect(() => {
    //获取歌单
    getMusicCollectPageApi({pageNum: 0, pageSize: 15}).then((result: any) => {
      setSongSheet(result.data.data.data);
    }, (error) => {
      console.log(error);
    });
    //获取新歌首发列表
    getMusicByPageAPI({pageNum: 0, pageSize: 27}).then((result: any) => {
      const {data} = result.data.data;
      setMusicList([...data]);
    }, (error) => {
      console.log(error);
    });
    //获取歌单类型推荐字典
    getSysDictData({pageNum: 0, pageSize: 6, dictType: "music_collect_style"}).then((result: any) => {
      setSongSheetStyle(result.data.data.data);
    }, (error) => {
      console.log(error);
    });
    //获取音乐类型字典
    getSysDictData({pageNum: 0, pageSize: 6, dictType: "music_style"}).then((result: any) => {
      setMusicStyle(result.data.data.data)
    }, (error) => {
      console.log(error);
    });

  }, []);


  /**
   * 根据字典类型获取不同的歌单类型数据
   * @param data
   */
  function getGxhtjListByDictData(data: DictData) {
    //获取歌单
    getMusicCollectPageApi({pageNum: 0, pageSize: 15, type: data.sysDictDataId}).then((result: any) => {
      console.log(result);
      // return;
      setSongSheet(result.data.data.data);
    }, (error) => {
      console.log(error);
    });
  }

  function getXgsfListBYDictData(data:DictData) {
    getMusicByPageAPI({pageNum: 0, pageSize: 27, type:data.sysDictDataId}).then((result: any) => {
      const {data} = result.data.data;
      setMusicList([...data]);
    }, (error) => {
      console.log(error);
    });
  }

  /**
   * @type 轮播图按钮单击事件,用于左按钮和右按钮
   * @param isLeft 用于表示是否为左,
   * true表示左按钮的单击事件,false为右按钮的单击事件
   * 关于react中antd框架方法的使用
   *  首页我们要通过ref获取组件实例
   *  通过实例中的current.方法名去调用
   */
  function lunboBtnClick(isLeft: Boolean = true, refObj: React.MutableRefObject<any>): void {
    //关于antd中方法的使用
    //我们首先要通过ref获取组件实例
    //然后通过实例对象,调用其方法
    if (isLeft) {
      refObj.current.prev();
    } else {
      refObj.current.next();
    }
  }

  return (
    <HomeStyle>
      {/*个性化推荐模块*/}
      <UnitBox key="gxhtj"
               title={"个性化推荐"}
               navbarList={songSheetStyle}
               sysDictDataIndex={songSheetStyleIndex}
               backgroundColor={"#FAFAFA"}
               navBarClick={(data: any) => {
                 getGxhtjListByDictData(data);
               }}
      >

        <div className="lunbo-box">
          <div className="lunbo-btn lunbo-left-btn iconfont" onClick={() => {
            lunboBtnClick(true, gxhtjRef)
          }}>&#xe779;</div>
          {/*// @ts-ignore*/}
          <div className="lunbo-btn lunbo-right-btn iconfont" onClick={() => {
            lunboBtnClick(false, gxhtjRef)
          }}>&#xe775;</div>
          {/**
           Math.ceil这里我们使用向上取整
           num 假设 10个元素 动态
           我一次展现 3 个 固定写死的
           那么求 我们要展示几次？ 10 / 3 向上取整
           <div className="lunbo-item-box" key={i}>
           */}
          <Carousel ref={gxhtjRef}>
            {
              Array.from(Array(Math.ceil(songSheet.length / 5)), (e, i) => {
                return (
                  <div className="lunbo-item-box" key={i}>
                    {
                      Array.from(Array(5), (item, index) => {
                        if (songSheet[i * 5 + index]){
                          return (
                            <SongSheetItem key={i * 5 + index}
                                           size={230}
                                           coverUrl={songSheet[i * 5 + index]?.cover}
                                           songName={songSheet[i * 5 + index]?.name}
                                           releaseTime={songSheet[i * 5 + index]?.createTimer}
                                           isAmplify={true}
                                           id={songSheet[i * 5 + index]?.musicCollectId}
                            />
                          )
                        }
                      })
                    }
                  </div>
                )
              })
            }
          </Carousel>
        </div>
      </UnitBox>


      {/*新歌首发模块*/}
      <UnitBox key="xgsf"
               title={"新歌首发"}
               backgroundColor="#F3F3F3"
               navbarList={musicStyle}
               sysDictDataIndex={musicStyleIndex}
               navBarClick={(data:any)=>{
                 getXgsfListBYDictData(data)
               }}
      >
        <div className="lunbo-box">
          <div className="lunbo-btn lunbo-left-btn iconfont" onClick={() => {
            lunboBtnClick(true, xgsfRef)
          }}>&#xe779;</div>
          {/*// @ts-ignore*/}
          <div className="lunbo-btn lunbo-right-btn iconfont" onClick={() => {
            lunboBtnClick(false, xgsfRef)
          }}>&#xe775;</div>
          {/**
           Math.ceil这里我们使用向上取整
           num 假设 10个元素 动态
           我一次展现 3 个 固定写死的
           那么求 我们要展示几次？ 10 / 3 向上取整
           <div className="lunbo-item-box" key={i}>

           */}
          <Carousel ref={xgsfRef}>
            {
              Array.from(Array(Math.ceil(musicList.length / 9)), (e, i) => {
                return (
                  <div className="music-cover-box-item" key={i}>
                    {
                      Array.from(Array(9), (item: MusicInsertDTO, index) => {
                        if (musicList[i * 9 + index]){
                          return (
                            <MusicCoverItem
                              id={musicList[i * 9 + index]?.musicId}
                              key={musicList[i * 9 + index]?.musicId}
                              size={120}
                              coverUrl={musicList[i * 9 + index]?.cover}
                              musicName={musicList[i * 9 + index]?.name}
                              singer={musicList[i * 9 + index]?.singerName}
                              timer={musicList[i * 9 + index]?.timer}
                              isShowMusicCover={true}
                              singerId={musicList[i * 9 + index]?.singerId}
                            />
                          )
                        }
                      })
                    }
                  </div>
                )
              })
            }
          </Carousel>
        </div>
      </UnitBox>


      {/*歌单推荐模块*/}
      <UnitBox key="gdtj"
               title={"歌单推荐"}
               navbarList={songSheetStyle}
               backgroundColor="#FAFAFA">

        <div className="lunbo-box">
          <div className="lunbo-btn lunbo-left-btn iconfont" onClick={() => {
            lunboBtnClick(true, gdtjRef)
          }}>&#xe779;</div>
          {/*// @ts-ignore*/}
          <div className="lunbo-btn lunbo-right-btn iconfont" onClick={() => {
            lunboBtnClick(false, gdtjRef)
          }}>&#xe775;</div>
          {/**
           Math.ceil这里我们使用向上取整
           num 假设 10个元素 动态
           我一次展现 3 个 固定写死的
           那么求 我们要展示几次？ 10 / 3 向上取整
           <div className="lunbo-item-box" key={i}>

           */}
          <Carousel ref={gdtjRef}>
            {
              Array.from(Array(Math.ceil(lunboList.length / 4)), (e, i) => {
                return (
                  <div className="lunbo-item-box" key={i}>
                    {
                      Array.from(Array(5), (item, index) => {
                        return (
                          // <li className="lunbo-item-box-li" key={i*3+index}>
                          <SongSheetItem key={i * 3 + index}
                                         size={230}
                                         coverUrl={lunboList[i * 3 + index].imgUrl}
                                         songName={lunboList[i * 3 + index].musicName}
                                         playedNumber={lunboList[i * 3 + index].playedNumber}
                                         isAmplify={true}
                          />
                          // </li>
                        )
                      })
                    }
                  </div>
                )
              })
            }
          </Carousel>
        </div>
      </UnitBox>

      {/*排行榜模块*/}
      {/*<UnitBox key="phb"*/}
      {/*         title={"排行榜"}*/}
      {/*         backgroundColor="#F5F5F5">*/}

      {/*  <div className="ranking-list-box">*/}
      {/*    <RankingList submitTitle={"巅峰榜"} color={"#ffffff"} title={"热歌"}/>*/}
      {/*    <RankingList submitTitle={"巅峰榜"} color={"#ffffff"} title={"新歌"}/>*/}
      {/*    <RankingList submitTitle={"巅峰榜"} color={"#ffffff"} title={"流行指数"}/>*/}
      {/*    <RankingList submitTitle={"巅峰榜"} color={"#ffffff"} title={"欧美"}/>*/}
      {/*    <RankingList submitTitle={"巅峰榜"} color={"#ffffff"} title={"韩国"}/>*/}
      {/*  </div>*/}
      {/*</UnitBox>*/}

    </HomeStyle>
  );
});
